<template>
  <div class="envoll-wrap">
    <!-- <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/envoll-banner.png" alt="" class="img"> -->
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/banner1109.png" alt="" class="img">
    <!-- <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/envvoll-trip.png" alt="" class="img"> -->
    <p class="trip-title">
      哈佛营养康复训练营每期4天3夜
    </p>
    <p class="trip-text">
    
        爱友将在这里接受系统的营养、运动、心理康复训练。往返车费，食宿费、服务费、专家指导费共计价值898元／人，<span style="font-weight: bold">慢病人群公益价格：498元／人</span>
    </p>
    <div class="container">
      <p class="main-title">
        怎么报名呢？
      </p>
      <p class="text" style="margin-top: 0.8rem">
        填此表报名后，会有健康管理专员与您联系具体事宜，竭诚欢迎您的到来，让我们一起走向康复之路。
      </p>
      <p class="text">
        联&nbsp 系&nbsp人：李老师
      </p>
      <p class="text">
        联系方式：15021513198
        <p>400-811-3468</p>
      </p>
      <div class="form">
        <p class="sub-title">
          1.姓名
        </p>
        <input type="text" class="input-text" v-model="name">
        <p class="sub-title mt50">
          2.性别
        </p>
        <mt-radio v-model="gender" :options=genderOpt>
        </mt-radio>
        <p class="sub-title mt50">
          3.联系方式
        </p>
        <input type="text" class="input-text" v-model="phone">
        <p class="sub-title mt50">
          4.哈佛营养康复训练营下半年将安排5期
        </p>
        <mt-checklist v-model="type" :options=typeOpt>
        </mt-checklist>
      </div>
    </div>
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/envoll-addr.png" alt="" class="img">
    <div class="container">
      <p class="sub-title mt50">
        是否预交诚意金
      </p>
      <mt-radio v-model="booking" :options=bookingOpt>
      </mt-radio>
      <p class="alert">
        提示：每期活动三天前截止，预交100元诚意金，可抵200元使用，以诚意金收到时间为准
      </p>
      <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/envoll-summit.png" alt="" class="img mt50" @click=submit>
      <p class="right">
        在法律允许的范围内，此活动最终解释权归上海展望健康管理有限公司所有
      </p>
    </div>
  </div>
</template>
<script>
import { Toast, Indicator, MessageBox, Radio, Checklist } from 'mint-ui';
import { createWinterCamp } from 'api/activity';
import { checkPhone, checkZhName } from 'common/utils';
import { wxshare } from 'common/mixin';
import { mapGetters, mapActions } from 'vuex';
import { showPay } from 'service/wxpayment';

export default {
  mixins: [wxshare],
  data() {
    return {
      gender: "1",
      name: '',
      phone: '',
      genderOpt: [{
        label: '男',
        value: "1",
      }, {
        label: '女',
        value: "0",
      }],
      booking: "0",
      bookingOpt: [{
        label: '是',
        value: "0",
      }, {
        label: '否',
        value: "1",
      }],
      type: [],
      typeOpt: [{
          label: '10月15号~10月18号（农垦疗养院）',
          value: 1,
        },
        {
          label: '10月30号~11月02号（云海间）',
          value: 2,
        },
        {
          label: '11月25日～11月28日 （农垦疗养院）',
          value: 6
        }
        // {
        //   label: '12月06号~12月09号（农垦疗养院）',
        //   value: 4
        // },
        // {
        //   label: '12月11号~12月14号（范蠡山庄）',
        //   value: 5
        // }
      ]
    }
  },
  methods: {
    ...mapActions({
      GetWinterCampChange: 'GetWinterCampChange'
    }),
    sucCb() {
      this.$router.push({ path: '/envollSucc' });
    },
    errCb() {
      this.$router.push({ path: '/envollErr' });
    },
    submit: function() {
      let self = this;

      if (self.isSubmit) {
        return false;
      } else {
        self.isSubmit = true;
      }

      let data = {
        phone: this.phone,
        username: this.name,
        gender: parseInt(this.gender),
        payType: parseInt(this.booking),
        locationIds: this.type
      };
      if (!checkZhName(data.username)) {
        Toast('请输入正确的姓名,名称为2-4位汉字');
        self.isSubmit = false;
        return false
      }

      if (!checkPhone(data.phone)) {
        Toast('请输入正确的手机号', '温馨提示');
        self.isSubmit = false;
        return false
      }

      if (!data.locationIds.length) {
        Toast('请选择要参加活动的期数', '温馨提示');
        self.isSubmit = false;
        return false
      }
      Indicator.open();
      createWinterCamp(data).then(result => {
        Indicator.close();
        if (data.payType == 1) {
            self.$router.push({ path: '/envollErr' });
        } else {
          this.GetWinterCampChange({
            orderId: result.data
          }).then(res => {
            showPay(res, self.sucCb, self.errCb)
          }, err => {
            self.isSubmit = false;
          })
          //调支付
        }
      }, error => {
        console.log('error===', error)
        Indicator.close();
        Toast(error);
        self.isSubmit = false;
      })
    }
  }
}

</script>
<style lang="less" scoped>
.envoll-wrap {
  .trip-title,.trip-text{
    padding: 0.5rem 2rem;
  }
  .trip-title{
    font-weight: bold;
  }
  .trip-text{
    padding-top: 0rem;
    font-size: 0.8rem;
  }
  .img {
    display: block;
    width: 100%;
    vertical-align: top;
  }
  .container {
    padding: 1.9rem 2rem;
  }
  .main-title {
    color: #ff1122;
    font-size: 1.6rem;
    font-weight: bold;
    font-style: italic
  }
  .text {
    font-size: 1rem;
    color: #0c0c0c;
    /*line-height: 1.6rem;*/
  }
  .form {
    margin-top: 1.5rem;
  }
  .sub-title {
    font-size: 1rem;
    font-weight: bold;
    color: #000000;
  }
  .input-text {
    margin-top: 0.5rem;
    border: 1px solid #d9d9d9;
    width: 100%;
    padding-left: 0.4rem;
    font-size: 1.5rem;
    line-height: 2.5rem;
    outline: none;
    border-radius: 4px;
  }
  .input-radio {
    width: 2rem;
    height: 2rem;
    vertical-align: middle;
  }
  .option {
    margin-left: 1rem;
    font-size: 1.5rem;
    vertical-align: middle;
  }
  .option-w {
    margin-top: 1rem;
  }
  .mt50 {
    margin-top: 2rem;
  }
  .alert {
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-size: 1rem;
    color: #ff1122;
    font-weight: bold;
    font-style: italic
  }
  .right{
    margin-top: 2rem;
    font-size: 0.8rem;
    color: #000000;
  }
}

</style>
